<template>
    <div style="background-color: #f0f2f5; padding: 20px">
        <el-button type="success" @click="dialogProductTypeCreate = true">新增</el-button>
        <el-button type="success" @click="ProductsTypeDelete">删除</el-button>
        <el-button type="success" @click="ProductTypeUpdate">修改</el-button>
        <el-button type="success" @click="ProductsTYpeResault">刷新</el-button>
    </div>
    <el-divider />
    <!-- 查询 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="类别名称" style="text-align: left;">
            <el-input v-model="form.ProductTypeName" placeholder="请输入类别名称" clearable />
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
            <el-button type="primary" @click="getProductshow()">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- 显示 -->
    <el-divider />
    <el-row>
        <el-col :span="8">
            <p>产品分类选择</p>
            <el-tree style="max-width: 600px" :data="options" :props="defaultProps" @node-click="handleNodeClick" />
        </el-col>
        <el-col :span="16">
            <h2>设置产品分类</h2>
            <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="productTypeId" label="编号" />
                <el-table-column prop="ptClass" label="产品分类名称" />
            </el-table>
        </el-col>
    </el-row>

    <!-- 新增弹出层 -->
    <el-dialog v-model="dialogProductTypeCreate" title="产品分类新增" width="500" :before-close="ProductTypeOver">
        <template #footer>
            <div class="dialog-footer">
                <h2 style="text-align: center">产品类别</h2>
                <!-- 新增产品分类表单 -->
                <el-form :model="ProductTypeAddInfo" label-width="auto" style="max-width: 600px">
                    <el-form-item label="类别名称">
                        <el-input v-model="ProductTypeAddInfo.addDtos.ptClass" />
                    </el-form-item>
                    <el-form-item label="上级类别">
                        <el-input v-model="ProductTypeAddInfo.PIdname" @dblclick="dialogProductTypeSelect = true" />
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="ProductTypeAdd">新增</el-button>
                <el-button @click="dialogProductTypeCreate = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 新增产品分类时双击上级类别弹出选择产品分类的弹窗 -->
    <el-dialog v-model="dialogProductTypeSelect" title="产品分类选择" width="500" :before-close="ProductTypeSelectOver">
        <template #footer>
            <div class="dialog-footer">
                <el-table :data="tableData" border style="width: 100%" @selection-change="ProductsTypeChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="productTypeId" label="编号" />
                    <el-table-column prop="ptClass" label="产品分类名称" />
                </el-table>
                <el-button @click="dialogProductTypeSelectOver()">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 修改弹出层 -->
    <el-dialog v-model="dialogProductsTypeUpdate" title="产品分类修改" width="500" :before-close="ProductTypeUpdateOver">
        <template #footer>
            <div class="dialog-footer">
                <h2 style="text-align: center">产品类别</h2>
                <!-- 新增产品分类表单 -->
                <el-form :model="UpdateInfo" label-width="auto" style="max-width: 600px">
                    <el-form-item label="类别名称">
                        <el-input v-model="FanInfo.ptClass" />
                    </el-form-item>
                    <el-form-item label="上级类别">
                        <el-input v-model="FanInfo.pFatherName" @dblclick="dialogProductTypeSelect = true" />
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="ProductTypeUpdateinfo">修改</el-button>
                <el-button @click="dialogProductsTypeUpdate = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '../../http.js'
const options = ref([]);

const value = ref();

onMounted(() => {
    getProducts();
    getProductshow()
})

//查询条件
const form = reactive({
    ProductTypeName: ''
})

//显示左侧产品分类树形显示
const getProducts = () => {
    axios.get(http.zblnb+'/erpcp/api/ProductType/ProductTypeSelect')
        .then(res => {
            options.value = res.data.data;
        })
        .catch(err => {
            console.log(err);
        })
}

//获取右侧产品分类表格数据
const ProductTypeId = ref(0);

//选择左侧产品分类
const defaultProps = {
    children: 'children',
    label: 'label',
}
const handleNodeClick = (data: any) => {
    ProductTypeId.value = data.value;
    getProductshow();
}
//显示右侧产品分类表格
const tableData = ref([]);

//显示右侧产品分类表格
const getProductshow = () => {
    axios.get(http.zblnb+"/erpcp/api/ProductType/ProductTypeSet?id=" + ProductTypeId.value + "&PTClass=" + form.ProductTypeName)
        .then(res => {
            tableData.value = res.data.data;
        })
        .catch(err => {
            console.log(err);
        })
}
//表格多选获取值
const multipleSelection = ref([])
const nenuUpdid = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    nenuUpdid.value = val.map(x => x.productTypeId);
}

//新增弹出层
const dialogProductTypeCreate = ref(false)
//新增产品分类参数
const ProductTypeAddInfo = reactive({
    PIdname: '',
    "addDtos": {
        "ptClass": "",
        "pFatherId": "",
        "addName": "张三",
        "addTime": "2024-12-16T05:51:28.436Z",
        "office_Id": "string",
        "user_Id": 0
    }
})

//新增产品分类
const ProductTypeAdd = () => {
    if (ProductTypeAddInfo.PIdname == '' || ProductTypeAddInfo.PIdname == '无' || ProductTypeAddInfo.PIdname == '顶级菜单' || ProductTypeAddInfo.PIdname == '没有父级') {
        ProductTypeAddInfo.addDtos.pFatherId = '0';
    }
    axios.post(http.zblnb+"/erpcp/api/ProductType/ProductTypeAdd", {
        addDtos: ProductTypeAddInfo.addDtos
    })
        .then(res => {
            if (res.data.data == 1) {
                ElMessage.success("添加成功")
                //刷新页面
                setTimeout(() => {
                    window.location.reload()
                }, 700);
            } else if (res.data.data == -1) {
                ElMessage.error("产品分类名称重复了")
                return
            } else {
                ElMessage.error("添加失败")
            }

        })

}

//添加产品分类关闭弹出层
const ProductTypeOver = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

// 新增产品分类下拉弹出层
const dialogProductTypeSelect = ref(false)
//新增产品分类下拉弹出层关闭弹出层
const ProductTypeSelectOver = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
//表格多选获取值
const ProductTypeSelectChangeInfo = ref([])
const ProductsTypeChange = (val: any) => {
    ProductTypeSelectChangeInfo.value = val[0]
}

//关闭弹出层后，反填产品分类上级名称
const dialogProductTypeSelectOver = () => {
    ProductTypeAddInfo.PIdname = ProductTypeSelectChangeInfo.value.ptClass
    ProductTypeAddInfo.addDtos.pFatherId = ProductTypeSelectChangeInfo.value.productTypeId
    dialogProductTypeSelect.value = false
}

//产品分类删除
const ProductsTypeDelete = () => {
    //删除确认提示
    ElMessageBox.confirm('确认删除吗?')
        .then(() => {
            if (multipleSelection.value.length == 0) {
                ElMessage.error('请选择要删除的产品分类')
                return;
            }
            let ids = multipleSelection.value.map(x => x.productTypeId)
            let dto = {
                ids,
                "delName": "string"
            }
            axios.post(http.zblnb+"/erpcp/api/ProductType/ProductTypeDelete", dto)
                .then((res) => {
                    if (res.data.data == 1) {
                        ElMessage.success('删除成功')
                        //一秒后刷新页面
                        setTimeout(() => {
                            window.location.reload()
                        }, 700)
                    }
                })
        })
        .catch(() => {
            // catch error
        })
}

//刷新产品分类
const ProductsTYpeResault = () => {
    window.location.reload()
}

// 修改产品分类
const dialogProductsTypeUpdate = ref(false)
//修改产品分类关闭弹出层
const ProductTypeUpdateOver = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const UpdateInfo = reactive({
    "dtos": {
        "productTypeId": '',
        "ptClass": "",
        "pFatherId": '',
        "addName": "",
        "addTime": "2024-12-17T01:32:34.465Z",
        "office_Id": "",
        "user_Id": '',
        "updName": "",
        "updTime": "2024-12-17T01:32:34.465Z",
        "delName": "",
        "delTime": "2024-12-17T01:32:34.465Z"
    }
})
const FanInfo = reactive({
    "productTypeId": '',
    "ptClass": "柜子",
    "pFatherId": '',
    "pFatherName": "家具",
    "addName": "朱泊霖",
    "addTime": "2024-12-16T05:51:28",
    "delName": '',
    "delTime": '',
})

const ProductTypeUpdate = () => {
    if (nenuUpdid.value.length != 1) {
        ElMessage.error('请选择一个产品分类')
        return
    } else {
        dialogProductsTypeUpdate.value = true
        axios.get(http.zblnb+"/erpcp/api/ProductType/ProductTypeAssignment?id=" + nenuUpdid.value[0])
            .then((res) => {
                FanInfo.productTypeId = res.data.data.productTypeId
                FanInfo.ptClass = res.data.data.ptClass
                FanInfo.pFatherId = res.data.data.pFatherId
                FanInfo.pFatherName = res.data.data.pFatherName
                FanInfo.addName = res.data.data.addName
                FanInfo.addTime = res.data.data.addTime
                FanInfo.delName = res.data.data.delName
                FanInfo.delTime = res.data.data.delTime
            })
    }
}

const ProductTypeUpdateinfo = () => {
    UpdateInfo.dtos.productTypeId = FanInfo.productTypeId
    UpdateInfo.dtos.ptClass = FanInfo.ptClass
    UpdateInfo.dtos.pFatherId = FanInfo.pFatherId
    UpdateInfo.dtos.addName = FanInfo.addName
    UpdateInfo.dtos.addTime = FanInfo.addTime
    UpdateInfo.dtos.delName = FanInfo.delName
    UpdateInfo.dtos.delTime = FanInfo.delTime
    UpdateInfo.dtos.office_Id = '1'
    UpdateInfo.dtos.user_Id = '1'
    axios.post(http.zblnb+"/erpcp/api/ProductType/ProductTypeUpdate", UpdateInfo)
        .then((res) => {
            if (res.data.data == 1) {
                ElMessage.success("修改成功")
                //0.7秒后刷新页面
                setTimeout(() => {
                    location.reload()
                }, 700)
            }
            else {
                ElMessage.error("修改失败")
            }
        })
}

</script>

<style></style>